//$Import('PhotoCollection');

STK.register('photoList', function() {

	var $ = jQuery;

	function sprintf(text){
	    var i=1, args=arguments;
	    return text.replace(/\{[a-zA-Z]+\}/g, function(pattern){
	        return (i < args.length) ? args[i++] : "";
	    });
	}
	
	function Bubble() {}
	
	Bubble.template = '<div class="slide_user" style="position:absolute;display:none;">' +
						'<div class="W_layer">' +
							'<div class="bg">' +
								'<table border="0" cellspacing="0" cellpadding="0">' +
									'<tbody><tr>' +
										'<td>' +
											'<div class="content layer_mini_info">' +
												'<p class="clearfix">{desc}</p>' +
											'</div>' +
										'</td>' +
									'</tr></tbody>' +
								'</table>' +
								'<div class="arrow {arrow}"></div>' +
							'</div>' +
						'</div>' +
					'</div>';
			
	Bubble.prototype.getFixedPosition = function(target, arrow) {
		var height = this.$node.height();
		if(arrow === 'top') {
			return {
				top : parseInt(target.css('top'), 10) - height - 10,
				left : -30 
			}
		}else{
			return {
				top : parseInt(target.css('top'), 10) + target.height() + 10,
				left : -30
			}
		}
		
	};
	
	Bubble.prototype.setPosition = function(left, top) {
		console.log(top);
		this.$node.css({
			left : left,
			top : top
		});
	};
	
	Bubble.prototype.isTop = function($node) {
		var top = $node.offset().top,
			winHeight = $(window).height(),
			height = $node.height(),
			scrollTop = $(window).scrollTop();
		if( winHeight - (top - scrollTop + height) < 100) {
			return true;
		}
		return false;
	};
	
	Bubble.prototype.show = function(target, desc, arrow) {
		this.$node = this.generateDom(desc, arrow);
		this.enterDocument(target);
		var pos = this.getFixedPosition(target, arrow);
		this.setPosition(pos.left, pos.top);
		this.$node.stop().show(400);
	};
	
	Bubble.prototype.hide = function() {
		this.$node.stop().stop(400);
		this.exitDocument();
	};
	
	Bubble.prototype.generateDom = function(desc, arrow) {
		return $( sprintf(Bubble.template, desc,
			arrow === 'top' ? 'arrow_b' : 'arrow_t' ) );
	};
	
	Bubble.prototype.enterDocument = function(target) {
		//document.body.appendChild(this.$node[0]);
		this.$node.insertAfter(target);
	};
	
	Bubble.prototype.exitDocument = function() {
		this.$node.remove();
		//document.body.removeChild(this.$node[0]);
		this.$node = null;
	};
	
	return {
		init : function(container) {
			this.container = container;
			this.getData();
			this.initBubble();
		},
		getAllPhotos : function() {
			var data = this.oriData,
				array = [];
			for(var i = 0, l = data.length; i < l; i++) {
				array = array.concat( data[i].detail );
			}
			return array;
		},
		getPhotos : function(album) {
			var data = this.oriData;
			for(var i = 0, l = data.length; i < l; i++) {
				if(data[i].name === album) {
					return data[i].detail;
				}
			}
			return null;
		},
		render : function(album, data) {
			var html = '<ul>';
			if(arguments.length === 2) {
				for(var i = 0, l = data.length; i < l; i++) {
					html += this.generatePhotoHtml(album, data[i]);
				}
			} else if( arguments.length === 1) {
				for(var i = 0, l = album.length; i < l; i++) {
					for( var j = 0, k = album[i].detail.length; j < k; j++) {
						html += this.generatePhotoHtml(album[i].name, album[i].detail[j]);
					}
				}
			}
			html += '</ul>';
			this.container.innerHTML = html;
			this.initLazyload();
		},
		generatePhotoHtml : function(album, data) {
			var html = '<li>';
			html += sprintf('<a href="{href}">', '#slide/' + album + '/' + data.key);
			html +=	sprintf('<img data-original="{src}" class="img">', this.getPhotoSrc(data.key) );
			html += '</a>';
			html += sprintf('<div class="author" desc="{desc}"><img data-original="{src}" width="50" height="50" alt="{author}"></div>', data.desc, data.head, data.author);
			//html += this.getBubble(data.desc);
			html += '</li>';
			return html;
		},
		getPhotoSrc : function(key) {
			return 'http://ww1.sinaimg.cn/small/' + key;
		},
		initBubble : function() {
			if(!this.bubble) {
				this.bubble = new Bubble();
			}
			var that = this;
			$(this.container).delegate('div.author', 'mouseover', function() {
				var $this = $(this);
				var isTop = that.bubble.isTop($this);
				console.log(isTop);
				var dec = $this.attr('desc');
				that.bubble.show($this, dec, isTop ? 'top' : 'bottom');
			});
			$(this.container).delegate('div.author', 'mouseout', function() {
				$(this).siblings('.slide_user').stop().hide(400);
				that.bubble.hide();
			});
		},
		initLazyload : function() {
			$('img').lazyload({
				load : this.fixAuthorImg
			});
		},
		getData : function() {
			this.oriData = STK.PhotoCollection.model.get('data');
			return this.oriData;
		},
		fixAuthorImg : function() {
			if( this.className !== 'img' ) {
				return;
			}
			var $this = $(this),
				$parent = $this.parent(),
				width = $this.width(),
				height = $this.height();
			$parent.siblings('.author').css('top', height - 25);
			//$parent.siblings('.slide_user').css('top', height + 40);
		}
	};	
});